<!--
 * @Author: your name
 * @Date: 2021-06-07 13:57:18
 * @LastEditTime: 2021-06-09 07:40:04
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \my_appd:\yangshuai\hyjt2\page\login\register.html
-->
<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org"
       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" >

<head>
  <title>新用户注册</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="keywords" content=""/>
  <script type="application/x-javascript">
    addEventListener("load", function () {
      setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
      window.scrollTo(0, 1);
    }
  </script>

  <!-- /font files  -->
  <!-- css files -->
  <link href="page/login/css/style.css" rel='stylesheet' type='text/css' media="all"/>
  <!-- /css files -->
</head>

<body>
<!-- <h1>Unique Login Form</h1> -->
<div class="log" style="display: flex;justify-content: center; align-items: center; margin-top: 66px;">
  <div class="content2">
    <h2>新用户注册</h2>
    <!-- 注册表单 -->
    <form action="/register" method="post" enctype="application/x-www-form-urlencoded">
      <input type="text" name="username" id="username" value="" onfocus="this.value = '';"
             onblur="if (this.value == '') {this.value = '';}" placeholder="用户名">
<!--      <input type="tel" name="usrtel" value="电话" onfocus="this.value = '';"-->
<!--             onblur="if (this.value == '') {this.value = '电话';}">-->
<!--      <input type="email" name="email" value="邮箱" onfocus="this.value = '';"-->
<!--             onblur="if (this.value == '') {this.value = '邮箱';}">-->
      <input type="password" name="password" id="password" value="" onfocus="this.value = '';" placeholder="请输入密码"
             onblur="if (this.value == '') {this.value = '';}">
      <input type="password" name="repassword" id="repassword" value="" onfocus="this.value = '';" placeholder="请输入确认密码"
             onblur="if (this.value == '') {this.value = '';}">
      <input type="text"  name="phonenumber" id="phonenumber" value="" onfocus="this.value = '';" placeholder="请输入手机号"
             onblur="if (this.value == '') {this.value = '';}">





      <div style="display: flex;justify-content: flex-start;margin-left: 8%;" id="verbox">

        <input type="text" style="width: 12%;margin-left: -63px;" name="phoneverifycode" id="phoneverifycode" value="" onfocus="this.value = '';" placeholder="请输入验证码"
               onblur="if (this.value == '') {this.value = '';}">
        <input type="button" class="sign-in" id="verifycode_btn" value="发送验证码" style="width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -68px;">
      </div>



<!--      <input type="submit" class="register" value="注册">-->
<!--      <input type="button" class="reset" onclick="toLoginPage()" value="登录">-->
      <div class="button-row">
        <input type="button" class="sign-in" id="register_btn" value="注册">
        <input type="button" class="reset" onclick="toLoginPage()" value="登录">
        <div class="clear"></div>
      </div>
    </form>
  </div>
  <!-- 清除样式浮动 -->
  <div class="clear"></div>
</div>
<div class="footer">
  <p id="copyright">Copyright &copy; 2021.<a target="_blank"
                              href="http://www.chengzhouyun.com/">澄州云</a> All rights reserved.</p>
</div>

</body>
<script src="../plugins/jquery/jquery.min.js"></script>
<script th:inline="javascript">
  function toLoginPage() {
    window.location = "/login"
  }

  function isEmptyNull(value){
    if (value == undefined || value == null || value =="") {
      return false;
    }
    return true;
  }

  function isPhoneNumber(val){
    var regPos =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
    var regpos2 = /\d{8}|\d{4}-\d{7}/;
    if(regPos.test(val) || regpos2.test(val)){
      return true;
    }else {
      return false;
    }
  }
  $(function () {

    // 获取网站系统信息
    $.get("/sys/system/1",function(data){
      if(data.statusCode == 200){
        $("#copyright").html(data.object.copyright)
      }
    })


    $("#verifycode_btn").on("click",function(){
      if(!isEmptyNull($("#phonenumber").val())){
        alert("请填写手机号")
        return;
      }

      if(!isPhoneNumber($("#phonenumber").val())){
        alert("手机号码格式不对");
        return;
      }


      $.ajax({
        url:"/phoneverifycode?phoneNumber="+$("#phonenumber").val(),
        type:"GET",
        dataType:"json",
        success: function(res){
          // console.log(res)
          if(res.statusCode == 200) {
            alert("验证码已发送,请尽快填写")
          } else{
            alert(res.errorMsg);
          }
        }
      })

      // 禁用按钮
      $("#verifycode_btn").attr("disabled","disabled");

      var i = 30;
      var timeout = setInterval(function(){
        i--;
        $("#verifycode_btn").val(i+"秒")
        console.log("定时器运行了")
        if(i == 0){
          console.log("定时器停止了")
          // 启用按钮
          $("#verifycode_btn").removeAttr("disabled");
          // 设置内容
          $("#verifycode_btn").val("重新发送");
          clearInterval(timeout);
        }
      },1000)

    })




    $("#register_btn").on("click",function (event) {
      if (!isEmptyNull($("#username").val())){
        alert("请填写用户名");
        return;
      }
      if (!isEmptyNull($("#password").val())){
        alert("请填密码");
        return;
      }
      if (!isEmptyNull($("#repassword").val())){
        alert("请填写确认密码");
        return;
      }

      if ($("#repassword").val() != $("#repassword").val()){
        alert("两次密码不同请重新填写");
        return;
      }

      if(!isEmptyNull($("#phonenumber").val())){
        alert("请填写手机号")
        return;
      }

      if(!isPhoneNumber($("#phonenumber").val())){
        alert("手机号码格式不对");
        return;
      }
      if(!isEmptyNull($("#phoneverifycode").val())){
        alert("请填写短信验证码");
        return;
      }

      var formData = new FormData();
      formData.username = $("#username").val();
      formData.password = $("#password").val();
      formData.repassword = $("#repassword").val();
      formData.tel = $("#phonenumber").val();
      formData.phoneverifycode = $("#phoneverifycode").val();
      $.ajax({
        url:"/register",
        type:"post",
        data: JSON.stringify(formData),
        contentType: 'application/json',
        dataType:"json",
        success: function(res){
          // console.log(res)
          if(res.statusCode == 200) {
            var confirm = window.confirm("用户注册成功是否要跳转登录页?");
            if (confirm == true){
              window.location = "/login"
            } else{
              location.reload();
            }
          } else{
            alert(res.errorMsg);
          }
        }
      })
    })

    $(window).resize(function () {
      console.log($(window).width())
      if($(window).width()<=736){
        $("#phoneverifycode").attr("style","width:38%;margin-right:27%;")
      }else if($(window). width() <= 768){
        $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
      }else if($(window). width() <= 1000){
        $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
        $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -68px;")
        $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 8%;")
      }else if($(window). width() <= 1200){
        $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
        $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -68px;")
        $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 9%;")
      }else if($(window). width() <= 1300){
        $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
        $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -16%;")
        $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 10%;")
      }else if($(window). width() <= 1700){
        $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
        $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -18%;")
        $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 11%;")
      }else{
        $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
        $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -20%;")
        $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 12%;")
      }
    })


    if($(window).width()<=736){
      $("#phoneverifycode").attr("style","width:38%;margin-right:27%;")
    }else if($(window). width() <= 768){
      $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
    }else if($(window). width() <= 1000){
      $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
      $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -68px;")
      $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 8%;")
    }else if($(window). width() <= 1200){
      $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
      $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -68px;")
      $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 9%;")
    }else if($(window). width() <= 1300){
      $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
      $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -16%;")
      $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 10%;")
    }else if($(window). width() <= 1700){
      $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
      $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -18%;")
      $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 11%;")
    }else{
      $("#phoneverifycode").attr("style","width:30%;margin-right:23%;")
      $("#verifycode_btn").attr("style","width: 100px;height:46px;font-size: 12px;margin-top: 5%;margin-left: -20%;")
      $("#verbox").attr("style","display: flex;justify-content: flex-start;margin-left: 12%;")
    }
  })
</script>
</html>
